<template>
  <div class="all">
     <header>
       <div class="div" @click="back">
         <img src="../../../assets/返回.png" alt="">
         <span class="solid">返回</span>
       </div>
       <div class="div ">
         <ul class="menuUl">
           <li :class="select === 1 ? 'select' : ''"
               @click="select = 1">
               服务
           </li>
           <li :class="select === 2 ? 'select' : ''"
               @click="select = 2">
               相关知识
           </li>
         </ul>
       </div>
       <div class="div">
         <span></span>
       </div>
     </header>
    <img v-show="select === 1" class="banner" src="../../../assets/居家.jpg" alt="">
    <img v-show="select === 2" class="banner" src="../../../assets/主图@2x.png" alt="">
    <p class="list" style="font-size: 17px">{{ItemInfo.item_id}}</p>
    <p class="list">￥{{ItemInfo.rebate_amount}}/次</p>
    <div v-show="select===1">
      <p class="list" @click="baoxianShow = true" style="justify-content: space-between;margin: 5px auto">
        <span style="display: flex;align-items: center;font-size: 13px">
          <a style="color: #999999;margin-right: 10px">保障</a>
          <a style="color: #2EC49B">免费投保·服务安全标准</a>
        </span>
        <img style="width: 7px;height: 13px;display: flex;" src="../../../assets/更多灰.png" alt="">
      </p>
      <p class="list"
         @click="patientsShow = true"
         style="justify-content: space-between;">
        <a >患者信息</a>
        <span style="display: flex;align-items: center;">
          <input type="text" readonly v-model="patient_user_name" placeholder="请添加被服务人">
          <img style="width: 7px;height: 13px;display: flex;" src="../../../assets/更多灰.png" alt="">
        </span>
      </p>
      <p class="list" @click="getTeamDoctorList(),team_doctorShow = true" style="justify-content: space-between;">
        <a >服务日期</a>
        <span style="display: flex;align-items: center;">
          <input type="text" readonly
                 v-model="DATE"
                 placeholder="请添加服务日期">
          <img style="width: 7px;height: 13px;display: flex;" src="../../../assets/更多灰.png" alt="">
        </span>
      </p>
      <p class="list" @click="getTeamDoctorList(),team_doctorShow = true" style="justify-content: space-between;">
        <a >服务时间</a>
        <span style="display: flex;align-items: center;">
          <input type="text" readonly
                 v-model="TIME"
                 placeholder="请添加服务时间">
          <img style="width: 7px;height: 13px;display: flex;" src="../../../assets/更多灰.png" alt="">
        </span>
      </p>
      <p class="list" @click="selectAddress" style="justify-content: space-between;">
        <a >服务地址</a>
        <span style="width: 75%;display: flex;align-items: center;">
          <input style="width: 100%;" type="text"  v-model="address" readonly placeholder="请添加服务地址">
          <img style="width: 7px;height: 13px;display: flex;" src="../../../assets/更多灰.png" alt="">
        </span>
      </p>
      <textarea v-model="REMARK" name="" id=""
                cols="30" rows="10"
      placeholder="请输入简要的情况或者描述以便大夫及时了解~"
      ></textarea>
    </div>
    <div v-show="select === 2"></div>
    <div style="height: 60px;"></div>
    <div class="bottom bottom1" v-show="select == 1">
      <span>应付￥{{ItemInfo.rebate_amount}}</span>
      <button @click="click_yuyue">立即预约</button>
    </div>
    <div class="bottom bottom2" v-show="select == 2">
      <button @click="click_yuyue">立即预约</button>
    </div>
    <van-popup round v-model="paibanShow" position="bottom" :style="{height: '80%', bottom: '50px'}">
      <div class="popDiv">
        <div class="popTop">
          <div class="popHeader">
            <div class="popdiv solid" @click="paibanShow = false">
              <span >取消</span>
            </div>
            <div class="popdiv">
              <span>选择服务时间</span>
            </div>
            <div class="popdiv" >
              <span class="solid" @click="timeConfirm" style="margin-right: 0!important;" >确认</span>
            </div>
          </div>
          <div class="popSelect" v-if="sevenDayList">
            <div class="popDate"
                 @click="selectDay = item.dateday,paibanList = list, selectList = []"
                 :class="selectDay == item.dateday ? 'dateSelect' : ''"
                 v-for="(item, index) in sevenDayList" :key="index">
              <p>{{Common.week(item.dateday)}}</p>
              <p>{{Common.formatDate(item.dateday, 'mm-dd')}}</p>
              <p :style="{color: item.schedule_con == '有号' ? '#F19149' : ''}">[{{item.schedule_con}}]</p>
            </div>
          </div>
        </div>
        <div class="popContent">
          <van-empty
            style="width: 100%;height: 60%"
            v-show="paibanList.length <= 0 && paiBanLoading === false"
            class="custom-image"
            :image="require('../../../assets/空两本书.png')"
            description="暂无号源"
          />
          <div  style="width: 100%;height: 50vh;display: flex;align-items: center;justify-content: center" v-show="paiBanLoading">
            <van-loading size="24px" type="spinner" color="#1989fa">加载中...</van-loading>
          </div>
          <p v-for="(item, index) in paibanList" :key="index"
             :class="[item.disable ? 'disable' : '']"
             @click.stop="selectPaiban(item, index)">
            <span>
              <a >
                {{item.start_time}} ~ {{item.end_time}} {{ item.disable ? '[已约满]' : '' }}
              </a>
            </span>
            <img v-show="item.checked == true" style="width: 12px;height: 9px;" src="../../../assets/selectImg/确定@2x.png" alt="">
          </p>
        </div>
      </div>
    </van-popup>
    <van-popup round v-model="baoxianShow"
               position="bottom" :style="{height: '35%', bottom: '50px'}">
      <header class="baoxianHeader">
        免费投保·服务安全标准
      </header>
      <div class="baoxianContent">
        <li>
          <img class="baoxianImg" src="../../../assets/selectImg/标准@2x.png" alt="">
        </li>
        <li>
          <p>免费投保</p>
          <p>免费意外保险-中国人保意外保险</p>
        </li>
      </div>
      <div class="baoxianContent">
        <li>
          <img class="baoxianImg" src="../../../assets/selectImg/标准@2x.png" alt="">
        </li>
        <li>
          <p>服务安全标准</p>
          <p>国际标准·安全监督·持证上岗·标准服务</p>
        </li>
      </div>
      <div class="bottomDiv">
        <button @click="baoxianShow = false">关闭</button>
      </div>
    </van-popup>
    <van-popup position="bottom" round :style="{height: '80%', bottom: '50px', background: '#FAF9FE'}"
               v-model="team_doctorShow">
      <div class="popDiv">
        <div class="popHeader" style="border-bottom: 1px solid #e5e5e5">
          <div class="div">
            <span @click="team_doctorShow = false">取消</span>
          </div>
          <div class="div">
            <span>选择医生</span>
          </div>
          <div class="div" >
            <span class="solid" style="margin-right: 0!important;" @click="selectDocNext">下一步</span>
          </div>
        </div>
        <div class="box"
             @click="clickBox(item)"
             :class="team_doc_id == item.USER_ID ? 'selectDoctor' : ''"
             v-for="(item, index) in team_doc_list" :key="index">
          <div class="box_left">
            <img v-if="item.PHOTO" :src="item.PHOTO" class="PHOTO" alt="">
            <img v-else-if="!item.PHOTO && item.SEX == 1" src="../../../assets/男医生@2x.png" class="PHOTO" alt="">
            <img v-else-if="!item.PHOTO && item.SEX == 2" src="../../../assets/女医生@2x.png" class="PHOTO" alt="">
          </div>
          <div class="box_right">
            <ul>
              <li>
                <span class="name" style="font-weight: bold;font-size: 15px">{{item.NICK_NAME}}</span>
                <span v-if="item.schedulelist && item.schedulelist.length > 0"
                      style="color: rgb(241, 145, 73);"
                >有号源</span>
                <span v-else>无号源</span>
              </li>
              <li>
                <span style="font-weight: 500;font-size: 13px !important;">{{item.MAJOR}}</span>
                <span>|</span>
                <span style="font-weight: 500;font-size: 13px !important;">{{item.DEPART}}</span>
              </li>
              <li>
                <span class="jieShao">{{item.HOSPITAL_NAME}}</span>
                <button class="biaoqian" v-if="item.GRADE">{{item.GRADE}}</button>
              </li>
            </ul>
          </div>
        </div>
        <van-empty
          style="width: 100%;height: 60%"
          v-show="team_doc_list.length <= 0"
          class="custom-image"
          :image="require('../../../assets/空两本书.png')"
          description=" 暂无医生"
        />
      </div>
    </van-popup>
    <van-popup position="bottom" round :style="{height: '50%', bottom: '50px', background: '#FAF9FE'}"
               v-model="patientsShow">
      <div class="popDiv">
        <div class="popHeader" style="border-bottom: 1px solid #e5e5e5">
          <div class="div">
            <span></span>
          </div>
          <div class="div">
            <span>被服务人信息</span>
          </div>
          <div class="div" >
            <span class="solid" style="margin-right: 0!important;" ></span>
          </div>
        </div>
        <ul class="patientUl" v-for="item in patientsList" @click="selectPatient(item)">
          <li :class="item.SEX == 1 ? 'nan' : 'nv'">
            <img v-show="item.SEX == 1" sex="男" class="patientPhoto" src="../../../assets/男-被服务@2x.png" alt="">
            <img v-show="item.SEX == 2" sex="女" class="patientPhoto" src="../../../assets/女-被服务@2x.png" alt="">
          </li>
          <li>
            <p>
              {{item.name}} &nbsp;
              <a style="color: #999999;font-size: 13px">{{item.age}}岁</a> &nbsp;&nbsp;&nbsp;
              <button v-show="item.TIPS == 0" class="tips">本人</button>
              <button v-show="item.TIPS == 1" class="tips">配偶</button>
              <button v-show="item.TIPS == 2" class="tips">父母</button>
              <button v-show="item.TIPS == 3" class="tips">子女</button>
              <button v-show="item.TIPS == 4" class="tips">其他</button>
            </p>
            <p>手机号：{{item.phone}}</p>
          </li>
        </ul>
      </div>
    </van-popup>
    <van-dialog v-model="xuzhiShow"
                title="预约须知"
                @confirm="yuyueConfirm"
                cancel-button-text="不同意"
                confirm-button-text="同意"
                confirm-button-color="#1da4f2"
                show-cancel-button>
      <ul class="xuzhiUl">
        <li>
          1.该服务由机构提供，平台承担监管责任;
        </li>
        <li>
          2.确认您已了解并认同本次订单所收费用
          包含哪些内容;
        </li>
        <li>
          3.确认您已了解并认同本次订单的服务内
          容;
        </li>
        <li>
          4.确认您已了解并认同本次订单服务注意
          事项，并配合服务人员提供完成本次订单
          所需的所有资料，并保证提供资料的真实
          性、合法性;
        </li>
      </ul>
      <div class="xuzhiBottom">
        <img v-if="agree === false" src="../../../assets/selectImg/不记住.png" alt="">
        <img v-else src="../../../assets/selectImg/已完成.png" alt="">
        若点击“同意”则表示已认真阅读并同意以上须知
      </div>
    </van-dialog>
  </div>
</template>

<script>
import {Toast} from 'vant'
import HTTP from '../../../http/video.http'
export default {
  name: 'ServiceItemsJuJia',
  data () {
    return {
      type: this.$route.query.type,
      select: 1,
      userid: this.$route.query.userid,
      team_id: this.$route.query.team_id,
      id: this.$route.query.id,
      sevenDayList: [],
      paibanShow: false,
      schedule_id: '',
      selectDay: '',
      paiBanLoading: true,
      selectList: [], // 选中的时间段放置点
      doc_amount_duration: 0, // 项目服务时间
      paibanList: [],
      TIME: '', // 预约时间 如17:00-18:00
      DATE: '',
      baoxianShow: false,
      ItemInfo: [],
      team_doctorShow: false, // 选择排班之前先选择医生
      team_doc_list: [],
      team_doc_id: '',
      patientsShow: false,
      patientsList: [],
      patient_user_id: '', // 患者id
      patient_user_name: '', // 患者
      address: '',
      ADDRESS_ID: this.$route.query.ADDRESS_ID, // 地址id
      REMARK: '', // 简要描述
      xuzhiShow: false,
      agree: true
    }
  },
  computed: {
    list () {
      let list = []
      let dataList = []
      this.sevenDayList.forEach((curr, index) => {
        if (curr.dateday == this.selectDay) {
          list = curr.schedulelist
        }
      })
      list.forEach((curr, index) => {
        if (curr.inquiry_id) {
          let obj = {
            start_time: curr.start_time,
            end_time: curr.end_time,
            pid: curr.id,
            disable: true
          }
          dataList.push(obj)
        } else {
          let obj = {
            start_time: curr.start_time,
            end_time: curr.end_time,
            pid: curr.id
          }
          dataList.push(obj)
        }
      })
      dataList = this.unique(dataList)
      return dataList
    }
  },
  mounted () {
    sessionStorage.setItem('order_item_type', this.type)
    let serviceJuJia = JSON.parse(sessionStorage.getItem('serviceJuJia'))
    if (serviceJuJia) {
      this.TIME = serviceJuJia.TIME
      this.DATE = serviceJuJia.DATE
      this.patient_user_id = serviceJuJia.patient_user_id
      this.patient_user_name = serviceJuJia.patient_user_name
      this.address = serviceJuJia.address
      this.REMARK = serviceJuJia.REMARK
      this.schedule_id = serviceJuJia.schedule_id
    }
    this.getItemDetail()
    this.get7day()
    this.getPaitents()
    if (this.ADDRESS_ID) {
      // this.getAddressHis()
    }
  },
  methods: {
    pay (data) {
      console.log(data)
      if (data.amount) {
        if (sessionStorage.getItem('sys') === 'ANDROID') {
          window.WebViewJavascriptBridge.callHandler('wxNewPayForDoctor', data.ORDER_ID + ',' + data.amount + ',' + HTTP.Http + 'vue_kfhl/#/myOrder?type=' + this.type, function (responseData) {})
          return false
        }
        this.$http.miniorder_pay({ORDER_ID: data.ORDER_ID, amount: data.amount})
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              window.WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                  'appId': res.data.data.appId, // 公众号名称，由商户传入
                  'timeStamp': res.data.data.timestamp, // 时间戳，自1970年以来的秒数
                  'nonceStr': res.data.data.nonceStr, // 随机串
                  'package': res.data.data.packageValue,
                  'signType': res.data.data.signType, // 微信签名方式：
                  'paySign': res.data.data.paySign // 微信签名
                },
                function (res) {
                  if (res.err_msg === 'get_brand_wcpay_request:ok') {
                  // 使用以上方式判断前端返回,微信团队郑重提示：
                  // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    Toast('支付成功')
                    window.location.href = '../../../vue_kfhl/#/myOrder?type=' + this.type
                    // this.$router.push({path: '/myOrder',
                    //   query: {
                    //     type: this.type,
                    //     userid: this.userid
                    //   }})
                  } else {
                    // this.$router.push({path: '/myOrder',
                    //   query: {
                    //     type: this.type,
                    //     userid: this.userid
                    //   }})
                    window.location.href = '../../../vue_kfhl/#/myOrder?type=' + this.type
                    // window.location.href = '../../../vue_kfhl/#/tuWenHome?type=' + data.type
                    Toast('支付失败')
                  }
                })
            } else {
              this.$toast(res.data.msg)
            }
          })
          .catch(err => {
            console.log(err)
            this.$toast('您的网络有些拥挤，请稍后再试')
          })
      } else {
        this.$router.push({path: '/myOrder',
          query: {
            type: this.type,
            userid: this.userid
          }})
      }
    },
    // 点击预约
    click_yuyue () {
      if (!this.patient_user_id) {
        this.$toast('请选择患者信息')
        return false
      } else if (!this.DATE) {
        this.$toast('请选择服务日期')
        return false
      } else if (!this.TIME) {
        this.$toast('请选择服务时间')
        return false
      } else if (!this.address) {
        this.$toast('请选择服务地址')
        return false
      }
      this.xuzhiShow = true
    },
    // 预约确认按钮
    yuyueConfirm () {
      if (this.agree === true) {
        this.$http.saveOrder({
          team_amount_id: this.id, //	项目ID
          REAL_AMOUNT: this.ItemInfo.rebate_amount, // 实际价格
          patient_user_id: this.patient_user_id, //	患者ID
          DATE: this.DATE, // 预约日期 如 2009-09-09
          TIME: this.TIME, // 预约时间 如17:00-18:00
          schedule_id: this.schedule_id, // 排班ID 用,连接
          REMARK: this.REMARK, // 简要描述
          ADDRESS_ID: this.ADDRESS_ID //	服务地址id
        })
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              this.pay(res.data.data)
              this.$toast('预约成功')
            } else {
              this.$toast(res.data.msg)
            }
          })
          .catch(err => {
            console.log(err)
            this.$toast('您的网络有些拥挤，请稍后再试')
          })
      } else {
        this.$toast('请先勾选须知')
      }
    },
    // 获取地址
    getAddressHis () {
      this.$http.detailAddress({
        ADDRESS_ID: this.ADDRESS_ID
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            console.log(res.data.data)
            let data = res.data.data
            // this.address = data.PROVINCE + ' ' + data.CITY + ' ' + data.DISCRECT + ' ' + this.ADDRESS
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 点击服务地址
    selectAddress () {
      let obj = {
        TIME: this.TIME,
        DATE: this.DATE,
        patient_user_id: this.patient_user_id,
        patient_user_name: this.patient_user_name,
        address: this.address,
        ADDRESS_ID: this.ADDRESS_ID,
        REMARK: this.REMARK,
        schedule_id: this.schedule_id
      }
      sessionStorage.setItem('serviceJuJia', JSON.stringify(obj))
      this.$router.push({path: '/address', query: {userid: this.userid}})
    },
    // 点击选择患者
    selectPatient (item) {
      this.patient_user_id = item.USER_ID
      this.patient_user_name = item.name
      this.patientsShow = false
    },
    // 获取被服务人
    getPaitents () {
      this.$http.findPatient({})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.patientsList = res.data.data
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 选中团队医生下一步
    selectDocNext () {
      if (this.team_doc_id) {
        this.get7day()
        this.team_doctorShow = false
        this.paibanShow = true
      } else {
        this.$toast('请先选择医生')
      }
    },
    // 点击选择团队医生
    clickBox (item) {
      if (item.schedulelist && item.schedulelist.length <= 0) {
        this.$toast('该医生近七天无可预约号源')
        return false
      }
      this.team_doc_id = item.USER_ID
    },
    // 获取团队下有排班医生
    getTeamDoctorList () {
      this.$http.findDoctor({
        team_id: this.team_id,
        team_amount_id: this.ItemInfo.id
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.team_doc_list = res.data.data
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 服务时间确认按钮
    timeConfirm () {
      if (this.selectList.length > 0) {
        this.schedule_id = ''
        this.selectList.forEach((curr, index) => {
          this.schedule_id += curr.pid + ','
        })
        this.schedule_id = this.schedule_id.substring(0, this.schedule_id.length - 1)
        this.DATE = this.selectDay
        this.TIME = this.selectList[0].start_time + '~' + this.selectList[this.selectList.length - 1].end_time
        this.paibanShow = false
      } else {
        this.$toast('请选择服务时间段')
        return false
      }
    },
    // 选择排班
    selectPaiban (item, index) {
      this.paibanList.map((odd, index) => {
        this.$set(odd, 'checked', false)
      })
      if (item.disable === true) {
        Toast('该时间段排班已满')
      } else {
        // 可选时间的次数
        var frequency = this.doc_amount_duration / 15
        if (frequency <= 1) {
          item.checked = !item.checked
        } else {
          var isnext = true
          for (var ii = 0; ii < frequency; ii++) {
            if (this.paibanList[index + ii]) {
              if (index == index + ii) {
                this.paibanList[index + ii].checked = true
              } else if (ii > 0 &&
                (this.paibanList[index + ii - 1].end_time == this.paibanList[index + ii].start_time) && this.paibanList[index + ii].disable !== true) {
                this.paibanList[index + ii].checked = true
              } else {
                this.paibanList.map((odd, index) => {
                  this.$set(odd, 'checked', false)
                })
                isnext = false
                break
              }
            } else {
              this.paibanList.map((odd, index) => {
                this.$set(odd, 'checked', false)
              })
              isnext = false
              break
            }
          }
          // 如果可以往后选
          if (isnext) {

          } else {
            var ispre = true
            // 往前选择 如果前面也有等于undefiend 或者disable 清除所有的选中项
            for (var ii = 0; ii < frequency; ii++) {
              if (this.paibanList[index - ii]) {
                // this.schedule_id += this.paibanList[index - ii].pid + ','
                if (index == index - ii) {
                  this.paibanList[index - ii].checked = true
                } else if (ii > 0 && (this.paibanList[index - ii + 1].start_time == this.paibanList[index - ii].end_time) && this.paibanList[index - ii].disable !== true) {
                  this.paibanList[index - ii].checked = true
                } else {
                  this.paibanList.map((odd, index) => {
                    this.$set(odd, 'checked', false)
                  })
                  ispre = false
                  break
                }
              } else {
                this.paibanList.map((odd, index) => {
                  this.$set(odd, 'checked', false)
                })
                ispre = false
                break
              }
            }
            if (ispre) {

            } else {
              Toast('该时间段排班已满')
              return false
            }
          }
        }
        if (item.checked === true) {
          this.selectList = []
          this.paibanList.map((odd, index) => {
            if (odd.checked === true) {
              this.selectList.push(odd)
            }
          })
        }
      }
    },
    unique (arr) {
      const res = new Map()
      return arr.filter((arr) => !res.has(arr.start_time) && res.set(arr.start_time, 1))
    },
    // 获取7天排班数据
    get7day () {
      this.paiBanLoading = true
      this.sevenDayList = []

      let doc_user_id = this.team_doc_id
      this.$http.find7DaySchedule({
        team_id: this.team_id,
        del_tag: '0,0',
        team_amount_id: this.id,
        doc_user_id: doc_user_id
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.paiBanLoading = false
            let data = res.data.data
            data.forEach((curr, index) => {
              this.sevenDayList.push(curr)
            })
            this.selectDay = this.sevenDayList[0].dateday
            this.paibanList = this.list
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    getItemDetail () {
      this.$http.findTeamAmountOne({id: this.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.ItemInfo = res.data.data
            this.doc_amount_duration = Number(this.ItemInfo.duration)
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    save () {
      // saveOrder
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped lang="scss">
.all{
  width: 100%;
  height: 100%;
  background: #FAF9FE;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div{
  flex: 1;
  //width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  font-size: 15px;
  font-weight: bold;
}
.div img{
  margin-right: 5px;
}
.div:nth-child(1) img{
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img{
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.solid{
  color: #1DA4F2;
}
.menuUl{
  width: 180px;
  height: 29px;
  display: flex;
  overflow: hidden;

  li{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #1da4f2;

    &:first-child{
      border-right: 1px solid #1da4f2;
      border-radius: 5px 0 0 5px;
    }

    &:last-child{
      border-radius:  0 5px  5px 0;
    }
  }
}
.select{
  background: #1da4f2!important;
  color: #FFFFFF;
}
.banner{
  width: 100%;
  height: 200px;
}
.list{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
  background: #FFFFFF;
  input{
    text-align: right;
    margin-right: 5px;
    border: none;
  }
}
textarea{
  width: 90%;
  height: 100px;
  background: #FFFFFF;
  border-radius: 10px;
  margin: 10px 5%;
  padding: 5px 10px;
  box-sizing: border-box;
  border: none;
  resize: none;
  &::placeholder{
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }
}
.popDiv{
  .popTop{
    position: sticky;
    top: 0;
  }
  .popHeader{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
    font-weight: bold;
  }
  .popdiv{
    flex: 1;
    display: flex;
    align-items: center;
    &:nth-child(2){
      justify-content: center;
      flex: 2;
    }
    &:nth-child(3){
      justify-content: flex-end;
    }
  }
}
.popSelect{
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: bold;
  font-family: "PingFang SC";
  overflow-y: hidden;
  flex-wrap: nowrap;
  white-space: nowrap;
  background: #1da4f2 !important;
}
.popDate{
  min-width: 55px;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background: #1da4f2 !important;
  color: #fff !important;
  font-family: "PingFang SC";
  font-weight: 500!important;
  font-size: 13px !important;

}
.dateSelect{
  height: 90% !important;
  color: #1da4f2 !important;
  background: #E3F0FD !important;
  border-radius: 10px;
}
.popContent{
  width: 100%;
  padding: 0 5px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.popContent p{
  width: 49%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  box-sizing: border-box;
  box-shadow: 0px 5px 15px 0px rgba(29, 164, 242, 0.15);
  border-radius: 5px;
  margin-top: 10px;
  font-size: 15px;
}
.baoxianHeader{
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #2EC49B;
  display: flex;
  align-items: center;
  justify-content: center;
}
.baoxianContent{
 display: flex;
  padding: 0 15px;
  box-sizing: border-box;
  li{
    &:nth-child(1) {
      width: 10%;
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    p{
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      height: 35px;
      display: flex;
      align-items: center;
    }
    p:nth-child(2){
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
    }
  }
}
.baoxianImg{
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
li{
  list-style: none;
}
.bottomDiv{
  width: 100%;
  height: 50px;
  button{
    width: 95%;
    height: 44px;
    border-radius: 20px;
    border: none;
    margin: auto 2% ;
    color: #FFFFFF;
    font-size: 17px;
    font-weight: bold;
    background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
  }
}

.box{
  padding: 10px;
  box-sizing: border-box;
  background: white;
  margin-bottom: 8px;
  display: flex;
}
.all .box:last-of-type{
  margin-bottom: 60px;
}
.PHOTO{
  width: 55px;
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
}
.box_left{
  width: 23%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
}
.dict_name{
  font-size: 11px;
  border: 1px solid #1DA4F2;
  border-radius: 2px;
  background: rgba(16, 184, 246, 0.1);
  color: #1da4f2;
  padding: 1px 3px;
  box-sizing: border-box;
  white-space: nowrap;
  /*margin-top: 10px;*/
}
.box_right{
  width: 78%;
}
.box_right ul{
  /*height: 60px;*/
  display: flex;
  flex-direction: column;
  align-content: space-around;
  justify-content: space-around;
}
.box_right ul li{
  display: flex;
  align-items: center;
  font-size: 13px;
  font-family: PingFang SC;
  min-height: 25px;
}
.box_right ul li:nth-child(1){
  justify-content: space-between;
}
.name{
  font-size: 15px!important;
  font-weight: bold;
  color: #333333;
}
.biaoqian{
  /*padding: 0px 8px;*/
  min-width: 44px;
  height: 18px;
  border-radius: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* background: rgba(29, 164, 242, 0.1); */
  background: transparent;
  color: #1DA4F2;
  /* border: none; */
  border: 1px solid;
  font-size: 11px;
  margin-left: 8px;
}
.biaoqian,
.jieShao
{
  display: flex;
  align-items: center;
  justify-content: center;
}
.jieShao{
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-right: 8px;
}
.box_rigth_bottom p{
  margin-bottom: 5px;
}
.box_rigth_bottom p:nth-child(1),
.box_rigth_bottom p:nth-child(3){
  font-size: 13px;
}
.box_rigth_bottom p a{
}
.box_rigth_bottom p span{
  color: #E3170D;
  margin: 0 8px 0 3px;
}
.popHeader{
  position: sticky;
  top: 0;
  background: #fff;
}
.selectDoctor{
  background: rgba(29, 164, 242, 0.1) !important;
}
.disable{
  color: #C2C2C2;
}
.patientPhoto{
  width: 57px;
  height: 57px;
  border-radius: 50%;
  object-fit: cover;
}
.tips{
  font-size: 13px;
  background: #F9D739;
  border: none;
  padding: 2px 3px;
  color: #FFFFFF;
}
.patientUl{
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  li:nth-child(1) {
    width: 20%;
    position: relative;
  }
  li:nth-child(2) {
    p{
      height: 50%;
      display: flex;
      align-items: center;
    }
    p:nth-child(1) {}
    p:nth-child(2) {}
  }
  .nan::after{
    content: '' ;
    width: 15px;
    height: 15px;
    display: block;
    background: url("../../../assets/男.png") no-repeat;
    background-size: 100%;
    position: absolute;
    bottom: 0px;
    right: 20px;
  }
  .nv::after{
    content: '' ;
    width: 15px;
    height: 15px;
    display: block;
    background: url("../../../assets/女.png") no-repeat;
    background-size: 100%;
    position: absolute;
    bottom: 0px;
    right: 20px;
  }
}

.bottom{
  width: 100%;
  height: 60px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px ;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  button{
    height: 44px;
    border-radius: 20px;
    border: none;
    background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
    color: #FFFFFF;
    font-size: 17px;
    font-weight: bold;
  }
}
.bottom1{
  display: flex;
  justify-content: space-between;
  button{
    width: 150px;
  }
}
.bottom2{
  display: flex;
  justify-content: center;
  button{
    width: 95%;
  }
}
.xuzhiUl{
  padding: 0 10px;
  box-sizing: border-box;
  li{
    line-height: 1.7;
  }
}
.xuzhiBottom{
  padding: 10px;
  box-sizing: border-box;
  color: #666;
  img{
    width: 16px;
    height: 16px;
  }
}
</style>
